<!--
 * @Author: your name
 * @Date: 2022-03-10 09:16:59
 * @LastEditTime: 2022-03-25 10:49:46
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \admin-basis\src\views\course\components\selectCoursewares.vue
-->
<!--
 * @author tianchao
 -->
<template>
  <div id="select-course">
    <split-pane split="vertical" :min-percent="0" :default-percent="28" class="warpper-box">
      <template slot="paneL">
        <div class="leftWrap">
          <div class="btn-container-title">
            <span
              style="font-size: 16px;font-weight: 700;color:#333;"
            >课件分类</span>
          </div>
          <el-tree
            ref="qytree"
            key="newTree"
            v-loading="treeLoading"
            :data="treeData"
            :expand-on-click-node="false"
            :props="defaultProps"
            default-expand-all
            class="dictTree"
            highlight-current
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" :class="{'custom-tree-node':data.id===subjectClassify}">
              <span>{{ node.label }}</span>
              <span :class="['tag']">{{ data.typeValue || '' }}</span>
            </span>
          </el-tree>
        </div>
      </template>
      <template slot="paneR">
        <el-main class="user-main">
          <div v-if="!isShow" class="ts-con">
            <div class="ts">
              <span v-html="showMsg" />
            </div>
          </div>
          <div v-else id="enterprise-select-course">
            <div class="show-table">
              <el-collapse-transition>
                <div v-show="searchshow" class="course-search merge">
                  <span class="svg-container">
                    <svg-icon icon-class="search" />
                  </span>
                  <el-input v-model.trim="listQuery.subjectName" placeholder="请输入课件名称搜索" class="search-input" @keyup.enter.native="handleFilter" />
                  <div class="course-search-btn">
                    <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
                    <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
                    <span class="course-search-more" @click="searchshow = !searchshow">
                      更多筛选条件
                      <i class="el-icon-arrow-down" />
                    </span>
                  </div>
                </div>
              </el-collapse-transition>
              <el-collapse-transition>
                <div v-show="!searchshow" class="course-search separate">
                  <div class="course-search-inner">
                    <el-row>
                      <el-col :span="12">
                        <div class="search-inner-item">
                          <div class="item-label">课件名称搜索</div>
                          <el-input v-model.trim="search.subjectName" style="width: 90%;" class="filter-item" placeholder="请输入名称搜索" />
                        </div>
                      </el-col>

                      <el-col :span="14">
                        <div class="search-inner-item">
                          课件类型 :
                          <el-radio-group v-model="search.subjectType">
                            <el-radio label="">全部</el-radio>
                            <el-radio label="KCLX01">视频</el-radio>
                            <el-radio label="KCLX03">音频</el-radio>
                            <el-radio label="KCLX02">pdf文档</el-radio>
                          </el-radio-group>
                        </div>
                      </el-col>
                      <el-col :span="7" class="unrelated">
                        <div class="search-inner-item">
                          <el-checkbox v-model="type" :true-label="6" :false-label="0" checked>仅显示未加入任何课程的课件</el-checkbox>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="course-search-btn">
                    <el-button type="primary" @click="handleFilter">搜索</el-button>
                    <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
                    <!-- <span class="course-search-more" @click="searchshow = !searchshow">
                      精简筛选条件
                      <i class="el-icon-arrow-up" />
                    </span> -->
                  </div>
                </div>
              </el-collapse-transition>
              <div class="btn-container">
                <div class="btn-container-title">
                  <span style="font-size: 16px;font-weight: 700;color:#333;">选择课件</span>
                  <span v-if="currentNode.name">
                    <span v-if="breadList.length > 0">,当前选择</span>
                    <span v-if="breadList.length" class="btn-container-title-select" :title="breadList.join('>')">{{ breadList.join('>') }}</span>
                  </span>
                </div>
                <div class="btn-container-btns" />
              </div>
              <div class="table">
                <el-table ref="rolemantable" v-loading="listLoading" :header-cell-style="rowClass" :data="list" class="tableScope" style="width: 100%" @row-click="handleRowClick">
                  <el-table-column
                    prop="subjectName"
                    label="课件封面"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <el-image
                        :preview-src-list="[scope.row.subjectImgUrl]"
                        style="width: 100%;height:auto;"
                        :src="scope.row.subjectImgUrl"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="subjectName"
                    label="课件名称"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="subjectTypeValue"
                    label="课件类型"
                    show-overflow-tooltip
                    width="100"
                  />
                  <el-table-column
                    prop="subjectIntroduce"
                    label="简介"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="subjectIntroduce"
                    label="操作"
                    width="80"
                    show-overflow-tooltip
                  >
                    <template
                      slot-scope="scope"
                    >
                      <el-button type="text" size="samll" @click.stop="handleRowClick(scope.row)">选择</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="btn-pagion fix">
                <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
              </div>
            </div>

          </div>

        </el-main>
      </template>
    </split-pane>
    <div class="show-tag">
      <p style="font-size: 16px;font-weight: 700;color:#333;">已选中课件</p>
      <el-tooltip v-for="tag in multipleSelection" :key="tag.id" class="item" effect="dark" :content="tag.subjectName" placement="left-end">
        <div>
          <el-tag class="tag-item etc" closable @close="handleCloseTag(tag)">
            {{ tag.subjectName }}
          </el-tag>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { coursewareTypeTree, queryPagecoursewarePage, getDictByCode } from './api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getToken } from '@/utils/auth'
import permission from '@/directive/permission/index.js' // 权限判断指令
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import splitPane from 'vue-splitpane'
export default {
  name: 'Enterpriseuser',
  components: { Pagination, splitPane },
  directives: { permission, elDragDialog },
  filters: {
  },
  props: {
    courseClassify: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loadingUpload: false,
      OrgTreedialog: false,
      isShow: false,
      showMsg: '',
      treeLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        subjectName: '',
        isSearch: 0
      },
      searchshow: false,
      search: {
        subjectKeyword: '',
        subjectType: '',
        phoneNumber: '',
        userIdnumber: '',
        status: [],
        subjectName: ''
      },
      list: [],
      treeData: [{ classifyName: '全部', children: [], id: '' }],
      total: 0,
      multipleSelection: [],
      defaultProps: {
        children: 'children',
        label: 'classifyName'
      },
      listLoading: false,
      breadList: [],
      currentNode: {},
      temporaryOrg: {},
      dict: {
        KCLX: [] // 课件类型
      },
      subjectClassify: '',
      type: 6
    }
  },
  created() {
    this.getTreeData()
    this.subjectClassify = this.courseClassify
  },
  methods: {
    /**
     * 获取字典
     */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code).then(res => {
          this.dict[code] = (res.data.data && res.data.data.length > 0) ? res.data.data[0].list : []
        }).catch(error => {
          reject(error)
        })
      })
    },
    getTreeData() {
      this.treeLoading = true
      return new Promise((resolve, reject) => {
        coursewareTypeTree({ classifyType: 'JNZQFL01', status: 'ZT01' }).then(response => {
          this.treeLoading = false
          this.treeData[0].children = response.data.data
          if (this.treeData.length > 0) {
            this.$nextTick(() => {
              const node = this.$refs.qytree.getCheckedNodes()
              this.handleNodeClick({ id: this.courseClassify }, node)
            })
          }
        }).catch(error => {
          reject(error)
          this.treeLoading = false
        })
      })
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        status: 'KCZT01',
        subjectClassify: this.subjectClassify,
        type: this.type,
        transcodeStatus: '3'
      }
      if (this.searchshow) {
        query['subjectName'] = this.listQuery.subjectName
      } else {
        query['subjectKeyword'] = this.search.subjectKeyword
        query['subjectType'] = this.search.subjectType
        query['subjectName'] = this.search.subjectName
      }
      return new Promise((resolve, reject) => {
        queryPagecoursewarePage(query).then(response => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    },
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '10px',
        background: 'rgba(247,247,248,1)'
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      // this.search.isSearch = 1 // 暂时屏蔽全局搜索人员
      this.getList()
    },
    resettingBtn() {
      this.listQuery.subjectName = ''
      for (const i in this.search) {
        if (this.search['' + i + ''] instanceof Array) {
          this.search['' + i + ''] = []
        } else {
          this.search['' + i + ''] = ''
        }
      }
      this.listQuery.page = 1
      this.getList()
    },
    /**
     * 获取当前树节点和其父级节点
     */
    getTreeNode(Node) {
      if (Node) {
        if (Node.label !== undefined) {
          this.breadList.unshift(Node.label) // 在数组头部添加元素
          this.getTreeNode(Node.parent) // 递归
        }
      }
    },
    // 点击树
    handleNodeClick(data, Node) {
      this.breadList = []
      this.getTreeNode(Node)
      this.currentNode = Object.assign({}, data)
      this.subjectClassify = data.id
      this.listQuery.page = 1
      this.getList()
      this.isShow = true
    },
    handleSelectionChange(arr) {
      if (this.multipleSelection.includes(arr[0])) {
        return this.$message({ type: 'warning', message: '该课程已在选中列表了，无需二次添加!' })
      }
      const obj = {}
      const multipleSelection = [...this.multipleSelection, ...arr]
      multipleSelection.forEach(item => {
        obj[item.id] = item
      })
      this.multipleSelection = Object.values(obj)
      this.$emit('handleSelect', this.multipleSelection)
    },
    // 勾选组织
    selectOrg(val) {
      this.temporaryOrg = [val]
    },
    handleCloseTag(tag) {
      this.multipleSelection.splice(this.multipleSelection.findIndex((i) => { return i.id === tag.id }), 1)
    },
    // 点击行触发，选中或不选中复选框
    handleRowClick(row) {
      this.handleSelectionChange([row])
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/scss">
@import '@/styles/mixin.scss';
$dark_gray: #bfced6;
#select-course {
  height: calc(100vh - 60px);
  padding: 0px;
	overflow-y: hidden;
  display: flex;
  .warpper-box{
    flex: 1
  }
  .show-tag{
    width:250px;
    padding:0 10px;
    border-left: 1px solid #ececec;
    // overflow-y: auto;
    .tag-item {
      max-width: 200px;
      margin-top: 3px;
      position: relative;
      padding-right: 18px;
      .el-tag__close {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
	.vue-splitter-container{
			width: 100%;
	}
  .splitter-pane.vertical.splitter-paneL{
    overflow-y: auto;
   /* overflow: auto; */
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    &:hover {
      overflow: auto;
    }
  }
  .leftWrap {
    background: #fff;
    padding: 10px;
		height: 100%;
    .search-tree-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tree-filter {
        padding: 10px 18px;
      }
    }
    .el-tree-node__content {
      margin-top: 10px;
    }
    .tag {
      font-size: 12px;
      border-radius: 4px;
      padding: 2px 4px;
      color: #fff;
      &.gh {
        color: #ff7474;
        border: 1px solid #ff7474;
      }
      &.qy {
        color: #2fbcfb;
        border: 1px solid #2fbcfb;
      }
      &.bm {
        color: #ffa11c;
        border: 1px solid #ffa11c;
      }
    }
    /deep/ .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    /deep/ .el-icon-caret-right:before {
      content: '\E7A0';
      font-size: 14px;
    }
    /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      content: '\E7A2';
      font-size: 14px;
    }
  }
  .user-main {
    padding: 10px;
    position: relative;
		height: 100%;
		overflow-y: auto;
		background: #fff;
    .ts-con {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background: white;
      .ts {
        line-height: 30px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -15px;
        margin-left: -110px;
        width: 210px;
        text-align: center;
        background: white;
        border-radius: 2px;
        box-shadow: 1px 1px 5px #e0dbdb;
        font-size: 14px;
        font-family: Microsoft Yahei In-Bold, Microsoft Yahei,
          Apple LiGothic Medium;
        color: #222222;
      }
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .el-drawer__wrapper {
    .el-drawer__header {
      margin-bottom: 10px;
    }
    .el-drawer__header span:focus {
      outline: none;
    }
    .el-drawer__close-btn:focus {
      outline: none;
    }
  }
  .custom-tree-node{
    width: 100%;
    display: flex;
   font-size: 14px;
   color:$mainColor
  }
}

#enterprise-select-course {
  width: 100%;
  background-color: #ffffff;
  height: 100%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  padding: 10px;
  overflow-y: auto;
  display: flex;
  &::-webkit-scrollbar {
    display: none;
  }
  .course-search {
    background-color: #fff;
    padding: 0 10px;
    .svg-container {
      padding: 0 5px 0 10px;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;
      &_login {
        font-size: 10px;
      }
    }
    .search-input {
      width: 40%;
      position: relative;
      &:after {
        content: '';
        position: absolute;
        left: -25px;
        right: 0;
        bottom: 0px;
        height: 1px;
        background: rgba(226, 227, 232, 1);
      }
      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;
        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }
    .course-search-btn {
      display: inline-block;
      float: right;
      .el-button.is-round {
        padding: 10px 30px;
        margin-right: 34px;
      }
      .course-search-more {
        font-size: 14px;
        font-weight: 500;
        @include font-color($mainColor);
        cursor: pointer;
        margin-left: 10px;
      }
    }
    &.merge {
      height: 50px;
      line-height: 50px;
    }
    &.separate {
      .course-search-inner {
        padding-top: 10px;
        .search-inner-item {
          padding: 10px;
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }
          .el-checkbox__label {
            font-weight: 400;
          }
          .el-input {
            position: relative;
            .el-input__inner {
              border: none;
              padding: 0;
            }
            &:after {
              content: '';
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      .course-search-btn {
        text-align: center;
        display: block;
        float: none;
        height: 56px;
        line-height: 56px;
      }
    }
  }
  .btn-container {
    display: flex;
    height: 36px;
    line-height: 36px;
    margin-top: 15px;
    margin-bottom: 15px;
    .btn-container-title {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .btn-container-title-select {
        @include font-color($mainColor);
      }
    }
  }
  .el-table {
    height: calc(100% - 40px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .dataForm {
    .el-select {
      width: 100%;
    }
  }
  .upload-model {
    text-align: center;
  }
  .show-table{
    flex: 1;
    padding: 0 5px;
  }
  .unrelated{
    display: flex;
    align-items: center;
  }
}
</style>

